<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.3/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #5256ad;
    }

    .drag-area {
      border: 2px dashed #fff;
      height: 300px;
      width: 500px;
      border-radius: 5px;
      display: flex;
      justify-self: center;
      align-items: center;
      flex-direction: column;
    }

    .drag-area.active {
      border: 2px solid #fff;
    }

    .drag-area .icon {
      font-size: 100px;
      color: #fff;
    }

    .drag-area header {
      font-size: 30px;
      font-weight: 500;
      color: #fff;
    }

    .drag-area span {
      font-size: 25px;
      font-weight: 500;
      color: #fff;
      margin: 10px 0 15px 0;
    }

    .drag-area button {
      font-size: 20px;
      font-weight: 500;
      padding: 10px 25px;
      border: none;
      outline: none;
      background-color: #fff;
      color: #5256ad;
      border-radius: 5px;
      cursor: pointer;
    }

    .drag-area img {
      width: inherit;
      height: inherit;
      object-fit: cover;
      border-radius: inherit;
      display: inline-table;
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div class="drag-area">
    <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
    <header>Drag & Drop to Upload File</header>
    <span>OR</span>
    <button>Browse File</button>
    <input type="file" hidden />
  </div>

  <script>
    const dropArea = document.querySelector('.drag-area');
    const dragText = dropArea.querySelector('header');
    const oInputFile = dropArea.querySelector('input[type=file]');
    const oBtn = dropArea.querySelector('button');
    let file;
    oBtn.onclick = function () {
      oInputFile.click();
    }
    oInputFile.addEventListener('change', function () {
      file = this.files[0];
      showFile(file)
      dropArea.classList.remove('active');
    });
    dropArea.addEventListener('dragover', function (ev) {
      if (ev.preventDefault) {
        ev.preventDefault();
      }
      this.classList.add('active');
      dragText.textContent = 'Release to Upload File';
    })
    dropArea.addEventListener('dragleave', function () {
      this.classList.remove('active');
      dragText.textContent = 'Drag & Drop to Upload File'
    })
    dropArea.addEventListener('drop', function (ev) {
      ev.stopPropagation();
      if (ev.preventDefault) {
        ev.preventDefault();
      }
      file = ev.dataTransfer.files[0];
      showFile(file);
    })

    function showFile(file) {
      const fileType = file.type;
      const validExtensions = ["image/png", "image/jpg", "image/jpeg"];
      if (validExtensions.includes(fileType)) {
        console.log('This Image File')
        const fileReader = new FileReader();
        fileReader.onload = function () {
          const fileURL = this.result;
          const imgTag = `<img src="${fileURL}" alt="" />`
          dropArea.innerHTML = imgTag;
        }
        // 重要必须的，否者加载不了 fileReader.onload
        fileReader.readAsDataURL(file);
      } else {
        alert('This is not an Image File');
        dropArea.classList.remove('active');
        dragText.textContent = 'Drag & Drop to Upload File';
      }
    }
  </script>
</body>

</html>